<template>
	<view class="xzfx-icon" :style="{width: size, height: size, fontSize: size}">
		<image v-if="type === 'image'" :src="imgSrc" :mode="mode" @error="setDefaultImage"></image>
		<text v-if="type === 'font'" :class="iconName"></text>
	</view>
</template>

<script>
	export default {
		name: "xzfx-icon",
		props: {
			size: {
				type: String,
				default: "32rpx"
			},
			type: {
				type: String,
				default: "font"
			},
			iconName: {
				type: String,
				default: ""
			},
			mode: {
				type: String,
				default: 'aspectFit' // 保持纵横比缩放
			}
		},
		data() {
			return {
				imgSrc: "",
				errImgSrc: require("./default.png")
			}
		},
		watch: {
			iconName: {
				handler(newVal) {
					this.imgSrc = newVal
				},
				immediate: true
			}
		},
		methods: {
			setDefaultImage(e) {
				this.imgSrc = this.errImgSrc
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./iconfont.css";

	.xzfx-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		vertical-align: middle;

		image {
			width: 100%;
			height: 100%;
		}
		
		[class*="xzfx-icon-"] {
			font-family: "iconfont" !important;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
	}
</style>
